<template>
  <div class="footerMain">
    <div class="box-container">
      <div class="box">
        <h3>快速导航</h3>
        <ui v-for="item in quickLinkList" :key="item">
          <li>
            <i class="fas fa-arrow-right"></i
            ><el-link
              :underline="false"
              @click="toPage(item.src)"
              class="footerLink"
              >{{ item.text }}</el-link
            >
          </li>
        </ui>
      </div>
      <div class="box">
        <h3>附加链接</h3>
        <ui v-for="item in extraLinkList" :key="item.id">
          <li>
            <i class="fas fa-arrow-right"></i
            ><el-link
              :underline="false"
              @click="toPage(item.src)"
              class="footerLink"
              >{{ item.text }}</el-link
            >
          </li>
        </ui>
      </div>
      <div class="box">
        <h3>附加链接</h3>
        <ui v-for="item in extraLinkList2" :key="item">
          <li>
            <i :class="item.fontClass"></i
            ><el-link
              :underline="false"
              @click="toPage(item.src)"
              class="footerLink"
              >{{ item.text }}</el-link
            >
          </li>
        </ui>
      </div>
      <div class="box newsLetter">
        <h3>公告</h3>
        <p>你可以订阅最新活动</p>
        <el-input v-model="inputEmail"></el-input>
        <a class="btn">订阅</a>
      </div>
    </div>
    <div class="credit">created by mr. web designer | all rights reserved!</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputEmail: "",
      quickLinkList: [
        { text: "主页", src: "/home" },
        { text: "商店", src: "/shop" },
        { text: "关于我们", src: "/about" },
        { text: "我们的团队", src: "/team" },
        { text: "博客", src: "/blog" },
        { text: "联系我们", src: "/contact" },
      ],
      extraLinkList: [
        { text: "我的订单", src: "/order" },
        { text: "我的购物车", src: "/cart" },
        { text: "我的账号", src: "/personalInfo" },
        { text: "我的收藏", src: "/favorite" },
        { text: "团队", src: "/team" },
      ],
      extraLinkList2: [
        { text: "FaceBook", src: "/home", fontClass: "fab fa-facebook-f" },
        { text: "Twitter", src: "/shop", fontClass: "fab fa-twitter" },
        { text: "Instagram", src: "/about", fontClass: "fab fa-instagram" },
        { text: "Linkdin", src: "/team", fontClass: "fab fa-linkedin" },
        { text: "Pinterest", src: "/blog", fontClass: "fab fa-pinterest" },
      ],
    };
  },
  setup() {},
  methods: {
    toPage(src) {
      this.$router.push(src);
    },
  },
};
</script>

<style>
.box-container {
  height: 310px;
  width: 100%;
  background: #f6fbf6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  margin: 0 20px;
  height: 250px;
  width: 300px;
  display: flex;
  flex-direction: column;
}
.box h3 {
  font-weight: bold;
  font-size: 20px;
  color: #244d4d;
  padding: 5px 0;
}
.box li {
  list-style: none;
  font-size: 10px;
  margin: 10px 0px;
}
.box a {
  margin: 0 8px;
}
.footerLink:hover {
  transform: translateX(10px);
}
.btn {
  display: inline-block;
  width: 150px;
  height: 40px;
  background: #244d4d;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn:hover {
  background: #516868;
}
.newsLetter p {
  font-size: 16px;
  color: #779;
}
.newsLetter .el-input__wrapper {
  width: 300px;
  height: 40px;
  border-radius: 0;
  border: 1px solid #244d4d;
  margin: 10px 0;
}
.newsLetter a {
  margin: 0;
}
.credit {
  height: 100px;
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #244d4d;
  font-size: 20px;
}
</style>
